import { DocumentEditor } from '@onlyoffice/document-editor-react'
import i18next from 'i18next'
import { FilePreviewState } from '../constants'

/**
 * office文件预览
 */
const OfficePreview = ({ configProps, setLoading, handleError }: FilePreviewState) => {
  const onDocumentReady = () => {
    console.log('Document is loaded')
    setLoading(false)
  }
  const onAppReady = () => {
    console.log('ONLYOFFICE Document Editor is ready')
    /**
     * csv有一个页面输入确认的过程，当类型时csv时需要在ready后显示内容
     * 为了保证样式统一，csv至少等2s后才显示文件
     */
    if (configProps.fileType === 'csv') {
      setTimeout(() => {
        setLoading(false)
      }, 2000)
    }
  }
  const onError = () => {
    handleError(`${configProps.title}文件加载失败`)
  }
  const onWarn = () => {
    console.log('ONLYOFFICE onWarn')
  }

  const onLoadComponentError = function (errorCode, errorDescription) {
    console.log('onLoadComponentError', errorCode, errorDescription)
    switch (errorCode) {
      case -1: // Unknown error loading component
        console.log(errorDescription)
        break

      case -2: // Error load DocsAPI from http://documentserver/
        console.log(errorDescription)
        break

      case -3: // DocsAPI is not defined
        console.log(errorDescription)
        break
    }
  }

  return (
    <div className="absolute h-[calc(100%-20px)] w-[100%]">
      <DocumentEditor
        id="docxEditor"
        documentServerUrl={configProps.serverUrl}
        config={{
          document: {
            info: {
              owner: 'migu'
            },
            key: configProps.key,
            fileType: configProps.fileType,
            title: configProps.title,
            // url: configProps.fileUrl,
            // title: '汉字名称',
            url: decodeURIComponent(configProps.fileUrl),
            permissions: {
              chat: false,
              comment: false,
              copy: true,
              deleteCommentAuthorOnly: false,
              download: true,
              edit: false,
              editCommentAuthorOnly: false,
              fillForms: false,
              modifyContentControl: false,
              print: false,
              protect: false,
              review: false,
              changeHistory: false,
              commentGroups: false,
              modifyFilter: false,
              rename: false,
              reviewGroups: [],
              userInfoGroups: []
            }
          },
          editorConfig: {
            lang: i18next.language === 'zh' ? 'zh-CN' : 'en',
            actionLink: '/',
            mode: 'view',
            customization: {
              customer: {
                name: 'migu',
                info: 'migu',
                logoDark: 'migu'
              },
              hideRulers: true,
              anonymous: { request: false, label: 'migu' },
              comments: false,
              compactHeader: true,
              compactToolbar: true,
              help: false,
              features: { spellcheck: false },
              forcesave: false,
              hideRightMenu: true,
              unit: 'cm',
              uiTheme: 'theme-dark',
              logo: {
                image: location.origin + '/logo.jpeg',
                imageDark: location.origin + '/logo.jpeg'
              },
              plugins: false,
              toolbarNoTabs: true,

              review: {
                hideReviewDisplay: true,
                showReviewChanges: false
              }
            }
          }
        }}
        // type="desktop"
        events_onAppReady={onAppReady}
        events_onError={onError}
        events_onWarning={onWarn}
        events_onDocumentReady={onDocumentReady}
        onLoadComponentError={onLoadComponentError}
      />
    </div>
  )
}

export default OfficePreview
